<template>
  <div>
    <el-table ref="table_container" header-align="center" :data="data" stripe :height="tableHeight" v-loading="loading" header-cell-class-name="table-header-cell" cell-class-name="table-cell">
      <el-table-column prop="userName" label="用户名" width="150px"/>
      <el-table-column prop="authority" label="权限" width="150px"/>
      <el-table-column prop="object" label="管辖目标"/>
      <el-table-column prop="name" label="姓名" width="100px"/>
      <el-table-column align="center" label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <el-button class="text-button" type="text" icon="el-icon-edit blue" @click="changePasswordDialogShow(scope.$index)">修改密码</el-button>
          <el-button class="text-button" type="text" icon="el-icon-edit blue" @click="changeInfoDialogShow(scope.$index)">修改信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="修改密码" :visible.sync="changePasswordDialog.visible" width="30%">
      <el-form ref="passwordForm" :rules="passwordFormRules" :model="changePasswordDialog" label-width="80px">
        <el-form-item label="新密码" prop="password">
          <el-input type="password" class="width80" v-model="changePasswordDialog.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="changePasswordDialog.visible=false">取 消</el-button>
        <el-button type="primary" @click="submitChangePassword">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改信息" :visible.sync="changeInfoDialog.visible" width="30%">
      <el-form ref="infoForm" :rules="infoFormRules" :model="changeInfoDialog" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input type="userName" class="width80" v-model="changeInfoDialog.userName"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input type="name" class="width80" v-model="changeInfoDialog.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="changeInfoDialog.visible=false">取 消</el-button>
        <el-button type="primary" @click="submitChangeInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { GetAuthorityTable } from '../../../api/table'
import { SubmitPasswordChange, awaitCheckUserName, SubmitAuthorityChange } from '../../../api/form'
export default {
  name: 'authority',
  data () {
    let validateUserName = (rule, value, callback) => {
      if (value.toString() !== '') {
        let res = awaitCheckUserName(value, 'all', this.changeInfoDialog.id)
        if (res.status === 200) {
          if (!res.responseJSON.result) {
            callback(new Error(res.responseJSON.msg))
          } else {
            callback()
          }
        }
      }
      callback()
    }
    return {
      pagination: {
        pageSize: 10,
        currentPage: 1
      },
      total: 0,
      data: [],
      tableHeight: '0px',
      loading: false,
      passwordFormRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'change' }
        ]
      },
      infoFormRules: {
        userName: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'change' },
          { validator: validateUserName, trigger: 'blur' }
        ],
        name: [
          { max: 10, message: '长度在 10 个字符以内', trigger: 'change' }
        ]
      },
      changePasswordDialog: {
        visible: false,
        password: '',
        id: ''
      },
      changeInfoDialog: {
        visible: false,
        userName: '',
        name: '',
        id: ''
      }
    }
  },
  mounted () {
    this.flashTable()
    setTimeout(this.reInitTableHeight, 100)
  },
  methods: {
    handleSizeChange (val) {
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    reInitTableHeight () {
      if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop < 0) {
        setTimeout(this.reInitTableHeight, 10)
      } else if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop <= 500) {
        this.tableHeight = '500px'
      } else {
        this.tableHeight = document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop + 'px'
      }
    },
    flashTable () {
      this.loading = true
      GetAuthorityTable(this.pagination.pageSize, this.pagination.currentPage).then((res) => {
        this.total = res.data.total
        this.data = res.data.data
        this.loading = false
      })
    },
    changePasswordDialogShow (index) {
      this.changePasswordDialog.visible = true
      this.changePasswordDialog.password = ''
      this.changePasswordDialog.id = this.data[index].id
    },
    changeInfoDialogShow (index) {
      this.changeInfoDialog.visible = true
      this.changeInfoDialog.id = this.data[index].id
      this.changeInfoDialog.name = this.data[index].name
      this.changeInfoDialog.userName = this.data[index].userName
    },
    submitChangePassword () {
      this.$refs['passwordForm'].validate((valid) => {
        if (valid) {
          SubmitPasswordChange(this.changePasswordDialog.id, this.changePasswordDialog.password).then((res) => {
            this.changePasswordDialog.visible = false
            this.$store.dispatch('SetFlash')
          })
        } else {
          return false
        }
      })
    },
    submitChangeInfo () {
      this.$refs['infoForm'].validate((valid) => {
        if (valid) {
          SubmitAuthorityChange(this.changeInfoDialog.id, this.changeInfoDialog.userName, this.changeInfoDialog.name).then((res) => {
            this.changeInfoDialog.visible = false
            this.$store.dispatch('SetFlash')
          })
        } else {
          return false
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'height',
      'userName',
      'contactPhone',
      'flash'
    ])
  },
  watch: {
    'pagination.currentPage': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    'pagination.pageSize': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    height: function (val) {
      this.reInitTableHeight()
    },
    contactPhone: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    userName: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    flash: function (val) {
      this.flashTable()
    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
  .table-tool {
    width: 100%;
    padding: 15px 10px;
  }
  .width80 {
    width: 80%;
  }
</style>
